<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div class="ui-window demo ui-widget ui-window-content ui-corner-top " style="width:590px">
	<div class="ui-window-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
	<span class="ui-dialog-title"> Hello</span>
<div style="float:right;">	
	<a class="ui-dialog-titlebar-close ui-corner-all" href="javascript:showRateBandForm();" role="button">
<span class="ui-icon ui-icon-plusthick">close</span>
</a>
</div>
</div>
<div id="formHolder" style="display:none;"></div>
	<div><div id="myGrid2" style="width:590px;border:0px;"></div></div>
</div><!-- End demo -->

<script>


var cardId=${ratecards.ratebands.rateCardId};
var grid${gridId};
var ${gridId}Columns = [
    {id: "srno", name: "Sno", field: "srno"},
    {id: "name", name: "Name", field: "name"},
    {id: "code", name: "Code", field: "code"},
    {id: "rate", name: "Rate", field: "rate"},
    {id: "type", name: "Type", field: "type"},
    {id: "minTerm", name: "Min Term", field: "minTerm"},
    {id: "maxTerm", name: "Max Term", field: "maxTerm"},
    {id: "#", name: "",  width: 20,  behavior: "selectAndMove",  selectable: false,  resizable: false,  cssClass: "cell-reorder dataMenu"}
  ];

  for (var i = 0; i < columns.length; i++) {
    columns[i].header = {
      menu: {
        items: [
          {
            iconImage: "../images/sort-asc.gif",
            title: "Sort Ascending",
            command: "sort-asc"
          },
          {
            iconImage: "../images/sort-desc.gif",
            title: "Sort Descending",
            command: "sort-desc"
          },
          {
            title: "Hide Column",
            command: "hide",
            disabled: true,
            tooltip: "Can't hide this column"
          },
          {
            iconCssClass: "icon-help",
            title: "Help",
            command: "help"
          }
        ]
      }
    };
  }


  var options = {
    enableColumnReorder: false,
	enableCellNavigation: true,
	editable: false,
	autoHeight:true
  };
  $(function () {
  var bandGridData = [];
 
    
    <c:forEach items="${rateBandsList}" var="myItem" varStatus="loopStatus">
     
    bandGridData[${loopStatus.index}] = {
				srno: '${loopStatus.index}',
		        name: '${myItem.name}',
		        code: '${myItem.code}',
		        rate: '${myItem.rate}',
		        type:'${myItem.type}',
		        minTerm: '${myItem.minTerm}',
		        maxTerm: '${myItem.maxTerm}'
		        
		};
      </c:forEach> 
   

    grid2 = new Slick.Grid("#myGrid2", bandGridData, columns, options);
    grid2.setSelectionModel(new Slick.RowSelectionModel());
    
    var config={grid:grid2, mode:'recycle', data:bandGridData,action:'ddhich-kyaooon-2'};
    registerForDragDrop(config);
    
   
   
  });
  
  function showRateBandForm()
  {
	
	 
	 
	  $('.amount').inputmask('remove');
		<c:url var="url" value="ratebands/add" />
		var formData = {rateCardId:cardId};
		
		var params={url:"${url}",complete:onComplte,error:onError,success:onSuccess,data:formData,type:"GET"};
		doAjax(params);
	
  }
  
  function updateGrid(dataParam)
  {
	  alert();
	  bandGridData.push({
				srno: '',
		        name: dataParam['ratebands.name'],
		        code: '',
		        rate: '',
		        type:'',
		        minTerm: '',
		        maxTerm: ''
		        
		});
	  
	  grid2.updateRowCount();
      grid2.render(); 
  }
  function onComplte(result)
  {
  	//alert("complete");
  }
  
  function onSuccess(result)
  {
  	
  	$("#formHolder").append(result).slideToggle();
  	
  }
  
  function onError(result)
  {
  	//alert("error");
  }
  
  function doAjax(config)
  {
  	alert(config.url);
  	jQuery.ajax({
			url: config.url,
			data:config.data,
			type:config.type,
			async: true,
			dataType: "text",
			complete:config.complete,
			error:config.error,
			success:config.success
		});
  }
</script>